<template>
  <div id='tmpl'>
      <!--1.0 图片分类  -->
      <div id="cate">
          <ul v-bind="{style:'width:'+ulWidth+'px'}">
              <li @click="getimages(0)">全部</li>
			  <!--此处循环的是下面data里面空数组里被传入的数据  /  循环的图片类别cate的item里有id 所以直接点击后 将id传给getimages即可-->
              <li v-for = "item in cates" @click="getimages(item.id)">{{item.title}}</li> 
          </ul>
      </div>

      <!--2.0 图片列表  -->
      <div id="imglist">
		<ul>
			<li v-for="item in list">
				<img v-lazy="item.img_url">
				<div id="desc">
					<h5 v-text="item.title"></h5>
					<p v-text="item.zhaiyao"></p>
				</div>
			</li>
		</ul>
      </div>
  </div>
</template>
<script>
import common from '../../kits/common.js';
import { Toast } from 'mint-ui';
export default {
  data () {
    return {
        ulWidth :375,
		cates:[],        //用来储存图片分类数据的数组  
		list:[]    //存储图片数据的数组
    };
  },
  created(){
	 this.getimages(); 
     this.getcates();
  },
  methods:{
	  //加载图片数据
	  getimages(cateid){
		//如果方法的cateid参数没有传递 则默认是0 代表获取所有图片数据
		cateid = cateid || 0;
		var url = common.apidomain + '/api/getimages/'+ cateid;
		this.$http.get(url).then(function(res){
			var body = res.body;
			 if(body.status!=0){
                    Toast(res.body.message);
                    return
				};
				this.list = body.message;
		})
	  },
      getcates(){
            var url = common.apidomain + '/api/getimgcategory';
            this.$http.get(url).then(function(res){
                if(res.body.status!=0){
                    Toast(res.body.message);
                    return
                }
                this.cates= res.body.message;
                var w = 62;
                var count = res.body.message.length + 1;
                this.ulWidth = w * count;
            })
      }
  }
}
</script>
<style lang="css" scoped>
/*1.0 图片分类*/
	#cate{
		width: 375px;
		max-width: 375px;
		overflow-x: auto;
	}
	#cate ul{
		margin: 0px;
		padding-left: 10px;
	}
	#cate li{
		cursor: pointer;
		list-style: none;
		display: inline-block;
		color:#0094ff;
		font-size: 14px;
		padding-left: 6px;
	}

	/*实现图片列表样式*/
	#imglist{

	}
	#imglist ul {
		padding-left: 0px;
	}
	#imglist li{
		list-style:none;
		position: relative ;
	}
	#imglist img{
		width:100%;
		height: 300px;
	}

	#desc{
		width: 100%;
		background-color: rgba(0,0,0,0.2);
		position: absolute;
		bottom: 2px;
		left: 0px;
	}

#desc h5{
	color: #ffffff;
	font-weight: bold;
}
#desc p{
	color:#fff;
}

image[lazy=loading] {
	width: 40px;
	height: 300px;
	margin: auto;
}
</style>